<template>
	<view :data-theme="theme" class="container">
		<view class="card">
			<view class="header-top">
				<view style="font-size: 30rpx;font-weight: bold;letter-spacing: 1rpx;">
					尝鲜价昨日数据
				</view>
				<view style="color: #999;align-items: center;display: flex;">
					查看详情<uni-icons type="forward" size="15" color="#5b5b5b"></uni-icons>
				</view>
			</view>
			<view class="content-text" style="line-height: 1.5;font-size: 28rpx;letter-spacing: 1rpx;color: #000;">
				<view>吸引了 <text style="font-weight: bold;font-size: 29rpx;">2148</text>个新客查看您的商品 <text
						style="margin-left: 20rpx;color: #e70821;">环比+6.3%</text></view>
				<view>促进了 <text style="font-weight: bold;font-size: 29rpx;">78</text>个新客下单 <text
						style="margin-left: 20rpx;color: #1ba035;">环比-6.3%</text></view>
				<view>这些新客为您增加了<text style="font-weight: bold;font-size: 29rpx;">99</text>个销量<text
						style="margin-left: 20rpx;color: #e70821;">环比+3.1%</text></view>
			</view>
		</view>

		<!-- 待报名活动 -->
		<view class="card">
			<view class="header-top">
				<view style="font-size: 30rpx;font-weight: bold;letter-spacing: 1rpx;">
					待报名活动
				</view>
				<view style="color: #999;align-items: center;display: flex;" @click="goCheckActive">
					查看全部活动<uni-icons type="forward" size="15" color="#5b5b5b"></uni-icons>
				</view>
			</view>
			<view class="content-text">
				<view>
					<scroll-view scroll-x="true" :style="{ 'padding-bottom':'20rpx' }"
						style="width: 100%; overflow: hidden;">
						<active-pending-page></active-pending-page>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 已报名活动 -->
		<view class="card">
			<view class="header-top">
				<view style="font-size: 30rpx;font-weight: bold;letter-spacing: 1rpx;">
					已报名活动
				</view>
				<view style="color: #999;align-items: center;display: flex;"  @click="goPriceAdjust">
					调价建议<uni-icons type="forward" size="15" color="#5b5b5b"></uni-icons>
				</view>
			</view>
			<view class="content-text">
				<u-tabs @click="tabChangeClick" :list="tabList" :scrollable="true" :lineWidth="30" :lineColor="bgColor"
					:current="tabIndex" :activeStyle="{ color: '#000'}" :inactiveStyle="{color:'#4c4d51'}"></u-tabs>
				<view style="margin-top: 16rpx;">
					<scroll-view scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
						style="height: 100%; overflow: hidden;" @scrolltolower="scrolltolowerFn">

						<taset-fresh-page :bgColor="bgColor" :tabIndex="tabIndex" @toActiveDetails="toActiveDetails"
							@openDataPopup="openDataPopup" @addProducts="addProducts"></taset-fresh-page>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<tui-drawer mode="bottom" :visible="showUpDatePopup" @close="closeComuleDate">
			<view class="ensure">
				<view class="title"><text @click="closeComuleDate" class="iconfont icon-guanbi5"></text>活动商品
				</view>
				<uni-segmented-control :current="currentInd" :values="items" inActiveColor="#000" :style-type="styleType"
					@clickItem="onClickItem" :active-color="bgColor" />
				<view class="content-item">
					<view v-if="currentInd === 0">
						<view class="content-text">
							<view class="tab-view">
								<scroll-view class="scroll-view" scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
									style="overflow: hidden;">
									<detail-product-page class="swiper-page" :bgColor="bgColor" :tab="tabs" ref="tabs"
										@toDetails="toDetails"></detail-product-page>
								</scroll-view>
							</view>
						</view>
					</view>
					<view v-if="currentInd === 1">
						<view class="content-text">
							<view class="tab-view">
								<scroll-view class="scroll-view" scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
									style="overflow: hidden;">
									<detail-product-page class="swiper-page" :currentInd="currentInd" :bgColor="bgColor" :tab="tabs" ref="tabs"
										@toDetails="toDetails"></detail-product-page>
								</scroll-view>
							</view>
						</view>
					</view>

				</view>

				<view style="height: 50px;"></view>
			</view>
		</tui-drawer>
	</view>
</template>

<script>
	import {
		setThemeColor
	} from "../../../utils/setTheme";
	let app = getApp();
	import tasetFreshPage from "../components/taset-fresh-page.vue";
	import activePendingPage from "./components/active-pending-page.vue";
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import detailProductPage from '../components/detail-product-page.vue';
	export default {
		components: {
			tasetFreshPage,
			activePendingPage,
			tuiDrawer,
			detailProductPage
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				loadMoreStatus: 'noMore', //加载更多
				tabList: [{
					name: '活动中/未开始',
					type: 1
				}, {
					name: '已结束',
					type: 2
				}],
				tabIndex: 0,
				showUpDatePopup: false,
				addCheckData: {},
				addCheckboxList: [],
				// ------------标签卡-------
				items: ['活动中', '未生效'],
				currentInd: 0,
				styleType: 'text',
				tabs: {},
			}
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		methods: {
			tabChangeClick(item) {
				this.tabIndex = item.index;
			},
			
			openDataPopup(ele) {
				console.log(ele, '212')
				this.showUpDatePopup = ele;
			},
			onClickItem(e) {
				if (this.currentInd !== e.currentIndex) {
					this.currentInd = e.currentIndex
				}
			},
			//关闭弹窗
			closeComuleDate() {
				this.showUpDatePopup = false;
			},
            
			addProducts(){
				this.goPage(`/pages/marketing/choosePeroduct/choosePeroduct`);
			},
			toActiveDetails() {
				this.goPage(`/pages/marketing/activeDetail/activeDetail`);
			},
			goCheckActive() {
				this.goPage(`/pages/marketing/checkAllActive/checkAllActive`);
			},
			goPriceAdjust(){
				this.goPage(`/pages/marketing/priceAdjustItem/priceAdjustItem`);
			},
			toDetails() {
				let currentInd = this.currentInd;
				this.goPage(`/pages/marketing/productDetail/productDetail?type=${currentInd}`);
			},
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>

<style lang="scss">
	.card {
		border-radius: 20rpx;
		background-color: #fff;
		margin: 20rpx 30rpx;
		padding: 28rpx;
	}

	.header-top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		align-items: center;
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #282828;
			text-align: center;
			margin: 38rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 0;
				color: #8b8c8d;
				font-size: 28rpx;
			}
		}
	}

	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}

	.content-item {
		height: 900rpx;
		margin: 20rpx;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 1000rpx;

		.scroll-view {
			height: 100%;
		}
	}
</style>